<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../taglibs.jsp" %>
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
	<head>
		<title>进入后台登录</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="application/x-javascript">
			addEventListener("load", function() {
				setTimeout(hideURLbar, 0);
			}, false);

			function hideURLbar() {
				window.scrollTo(0, 1);
			}
		</script>
		<!-- Custom Theme files -->
		<link href="${path}/static/back/login/style.css" rel="stylesheet" type="text/css" media="all" />
		<!-- //Custom Theme files -->
		<!-- web font -->
		<link href='${path}/static/back/login/fonts/fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
		<!--web font-->
		<!-- //web font -->
		
		<style type="text/css">
		body {
 			font-family: 'Muli', sans-serif;
    		background: url(${path}/static/back/login/2.jpg)no-repeat center 0px;
			-webkit-background-size:cover;
			-moz-background-size:cover; 
			background-size:cover;
    		background-attachment: fixed;
		} 
		
		#lgBtn{
			background: #3be8b0;
    		color: #FFF;
    		font-size: 17px;
    		text-transform: capitalize;
  			padding: .5em 2em;
  		  	letter-spacing: 1px;
    		transition: 0.5s all;
    		-webkit-transition: 0.5s all;
    		-moz-transition: 0.5s all;
    		-o-transition: 0.5s all;
    		display: inline-block;
    		cursor: pointer;
    		outline: none;
    		border: none;
			font-family: 'Muli', sans-serif;
			width: 100%;
    		border-radius: 25px;
		}
		</style>
		
		   <script>
        if (window.top !== window.self) {
            window.top.location = window.location;
        }
    </script>
		
	</head>
	<body>
		<!-- main -->
		<div class="agileits-main">
			<div class="w3top-nav">
				<div class="w3top-nav-left">
					<h1><a href="#">吉乐铺</a></h1>
				</div>
				<div class="w3top-nav-right">
					<ul>
						<li><a href="${path }/home/home.shtml" class="active">前台主页</a></li>
						<!-- 	<li><a href="#">About</a></li>  
						<li><a href="#">Services</a></li> 
						<li><a href="#">Gallery</a></li>
						<li><a href="#">Blog</a></li> 
						<li><a href="#">Contact</a></li> -->
					</ul>
				</div>
				<div class="clear"></div>
			</div>
			<div class="header-main">
				<h2>Login Now</h2>
				<div class="header-bottom">
					<div class="header-right w3agile">
						<div class="header-left-bottom agileinfo">
							<form id = "form">
								<div class="icon1">
									<input type="text" placeholder="请输入用户名" required="" id="name" name="username"/>
								</div>
								<div class="icon1">
									<input type="password" placeholder="请输入密码" required="" id="password" name="password"/>
								</div>
								<div class="login-check">
									<label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i> </i> 记住密码</label>
								</div>
								<div class="bottom">
									<input type="button" id = "lgBtn" value="Login" onclick="submitForm()"/>
								</div>
								<p><a href="#">忘记 密码?</a></p>
							</form>
						</div>
					</div>
				</div>
			</div>

		</div>
		<!-- //main -->
		<!-- copyright -->
		<div class="copyright w3-agile">
			<p>请输入正确的用户名 <a href="#">喵喵喵</a></p>
		</div>
		<!-- //copyright -->
		
		<script src="${path}/static/common/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="${path}/static/common/layer/layer.js" type="text/javascript" charset="utf-8"></script>
		<script src="${path}/static/common/mylayer.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		function submitForm() {
			console.log('登录验证');
			var name = $("#name").val();
			console.log(name);
			var password = $("#password").val();
			
			// 1、首先在前台通过正则表达式验证格式对不对
			// 用户名必须满足： 4-8位的数字或者字母
			var pattern = /^[0-9a-zA-Z]{2,8}$/;
			//if (!pattern.test(name)) {
			if (pattern.test(password) == false) {
				mylayer.errorMsg("格式非法，请输入 2-8位的数字或者字母");
				return;
			}
			
			// 2、格式对的情况下，再通过ajax请求后台完成登录
			$.post(
				"${path}/user/loginIndex.action",
				// 把form表单里面的数据，封装成json格式
				// name: zhangsan
				// password: 123	
				$("#form").serialize(),
				function(result) {
					console.log(result);
					//if(result.code == 1) {
					if(result.success) {
						mylayer.successUrl(result.msg, "${path}/index.action");
					} else {
						mylayer.errorMsg(result.msg);
					}
				},
				"json"
			);
		}
		
	</script>
	</body>
</html>
